<template>
  <div class="login">
    <div class="center">
      账号：<input
        type="text"
        v-model="uname"
      /><br />
      密码：<input
        type="password"
        v-model="pwd"
      /><br />
      <van-button type="default" class="btn"
        @click="login">登录</van-button>
    </div>
  </div>
</template>
<script>
import { Dialog } from 'vant';
import { getUser } from '@/api/todos';
export default {
  data() {
    return {
      user: {},
      uname: '',
      pwd: '',
    };
  },
  created() {
    this.getUser();
  },
  methods: {
    async getUser() {
      const res = await getUser();
      this.$set(this, 'user', res.data);
    },
    login() {
      if (this.uname == this.user.userName && this.pwd == this.user.password) {
        localStorage.setItem('user', this.user);
        this.$router.push('/home');
      } else {
        Dialog.alert({
          message: '账号或密码错误',
        }).then(() => {
          // on close
        });
      }
    },
  },
};
</script>
<style
  lang="scss"
  scoped
>
.login {
  position: relative;
  height: 667px;
  width: 375px;
  background:url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.pp-sp.com%2FUploadFiles%2Fimg_0_1718198026_3706609930_26.jpg&refer=http%3A%2F%2Fwww.pp-sp.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1657153927&t=df9aebf37695ea1c1ca0f821eb8e55e6);
  .center {
    color: #000;
    font-size: 18px;
    width: 320px;
    height: 200px;
    position: absolute;
    left: 10%;
    top: 30%;
    input {
      margin-top: 30px;
      color: #000;
    }
    .btn {
      width: 20%;
      height: 15%;
      margin: 30px 0  0 120px;
      color: #000;
    }
  }
}
</style>
